<template>
<div>
  <avue-crud ref="crud"
        :page="page"
        :data="dataList"
        :table-loading="dataListLoading"
        :option="tableOption"
        @on-load="getDataList">

      <template slot="orders" slot-scope="scope">
        <el-button size="small" @click="openOrderList(scope.row.userId)">
          查看详情
        </el-button>
      </template>
        
      <template slot-scope="scope"
                slot="menu">          

        <el-button v-if="scope.row.state == 2"
                  size="small"
                  type="primary"
                  icon="el-icon-edit"
                  @click.stop="vertify(scope.row.cashId,'pass')">通过</el-button>
        <el-button v-if="scope.row.state == 2"
                  size="small"
                  type="danger"
                  icon="el-icon-edit"
                  @click.stop="vertify(scope.row.cashId,'not')">拒绝</el-button>
        <el-button v-else-if="scope.row.state == 1"
                  type="info"
                  size="small"
                  style="color:#F56C6C;background-color:white;border:0px solid #EBEEF5">审核未通过</el-button>                  
        <el-button v-else-if="scope.row.state == 3"
                  type="info"
                  size="small"
                  style="color:#F56C6C;background-color:white;border:0px solid #EBEEF5">已打款</el-button>                  
        <el-button v-else
                  class="edit"
                  type="info"
                  size="small"
                  style="color:#02A1E9;background-color:white;border:0px solid #EBEEF5">审核已通过</el-button>              
                  
      </template>
  </avue-crud>

  <el-dialog
    title="订单详情"
    :visible.sync="ordersVisible"
    width="60%"
    center
    v-loading='orderLoading'>
    <div>
      <avue-crud ref="orders"
        :data='orderList'
        :option="cashOutOrdersOption">
      </avue-crud>
    </div>

    <!-- <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span> -->
  </el-dialog>

  
</div>
</template>

<script>
import { tableOption } from '@/crud/finance/userCashout'
import { cashOutOrdersOption } from '@/crud/finance/cashOutOrdersOption'
export default {
  data(){
    return {
      dataListLoading :false,
      orderLoading: false,
      dataList: [],
      orderList: [],
      tableOption: tableOption,
      cashOutOrdersOption: cashOutOrdersOption,

      ordersVisible: false,
			page: {
					total: 0, // 总页数
					currentPage: 1, // 当前页数
					size: 10 // 每页显示多少条
			},                                                                                                                                                                                                                                                                              
			orderPage: {
					total: 0, // 总页数
					currentPage: 1, // 当前页数
					size: 10 // 每页显示多少条
			},                                                                                                                                                                                                                                                                              
    }
  },

  methods: {
    getDataList(page,params){
      this.dataListLoading = false
      this.$http({
        url: this.$http.adornUrl("/cashOut/pageByUser"),
        // url: "http://localhost:3004/cashout",
        method: 'get',
        params: this.$http.adornParams(
          Object.assign({
            current: page?page.currentPage:this.page.currentPage,
            total: page?page.total:this.page.total,
            size: page?page.size: this.page.size,
          })
        )
      }).then(({data}) =>{
        this.dataList = data.records
        this.page.total = data.total
        this.page.currentPage = data.current
        // this.page.total = data.total

        // console.log(data);  
      })
    },

    openOrderList(userId){
      this.ordersVisible = true
      this.orderLoading = true
      this.$http({
        url: this.$http.adornUrl('/cashOut/getPromoTionOrder'),
        method: 'get',
        params: this.$http.adornParams({
          userId
        })
      }).then((res) =>{
        console.log(res)
        this.orderList = res.data.yjsOrderList
        this.orderLoading = false
      })
    },

    vertify(cashId,ifpass){
      this.$confirm(ifpass=='pass'?'确定通过此条提现审核？':'确定不通过此条提现审核？', '提现审核', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/cashOut/checkingCashOut'),
          method: 'post',
          params: this.$http.adornParams({
            cashId,
            status: ifpass=='pass'?'0':'1'
          })
        }).then((res) =>{
          console.log(res);
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.getDataList()
        })
      })     
    }
  },

}
</script>
<style scoped>
html>>>.el-dialog__body{
  padding: 30px 20px;
}
</style>